<template>
  <div id="home" >
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="40"
      shapeType="star"
      :particleSize="4"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="cash"
    >
    </vue-particles>
    <div class="header">
      <div class="nav-item">WORKSPACE
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renwu"></use>
        </svg>
      </div>
      <div class="nav-item">Manage workspace
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xinxi"></use>
        </svg>
      </div>
      <div class="nav-item">Back
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-faxian"></use>
        </svg>
      </div>
      <div class="nav-item">Homepage
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
      </div>
    </div>
    <div class="main">
      <div id="app" >
        <div style="display: flex; width: 100%; height: 100%">
          <div style="width: 20%">
            <el-aside width="100%" style="background-color: rgb(233, 241, 246)">
              <el-menu :router=true :default-active="$route.name" unique-opened="true">

              </el-menu>
            </el-aside>
          </div>
          <div style="width: 80%">
            <router-view></router-view>
          </div>
        </div>
      </div>
      <div class="form">
        <p>new test</p>
        <div class="button">
            <button @click="appear_get" class="button-get">get</button>
            <button @click="appear_post" class="button-post">post</button>
        </div>
        <div class="form3" v-for="(item,index) in get_name1" :key="index">
          GET{{item}}{{index}}
          <span class="status incorrect2"  @click="appear_get_name1(index)"></span>
        </div>
<!--        <div class="bottom_left3" v-for="(item,index) in name2">-->
<!--          POST&nbsp&nbsp&nbsp&nbsp{{item}}-->
<!--          <span class="status incorrect2"  @click="appear_bottom_left3(index)"></span>-->
<!--        </div>-->
      </div>
      <div class="form1">
        <input type="text" placeholder="POST" v-show="show_post_show_post"/>
        <input type="text" placeholder="get" v-show="show_get_show_get"/>
        <input type="text" placeholder="url:" />
        <input type="text" placeholder="headers:" />
        <input type="text" placeholder="body:" />
        <input type="text" placeholder="tests:" />
        <div class="button">
          <button @click="add_suspend_post">run</button>
          <button>cancel</button>
        </div>
      </div>
      <div v-show="show_get" class="form1">
        <input type="text" placeholder="GET"  v-model="get_list1"/>
        <input type="text" placeholder="url:"  v-model="get_list2"/>
        <input type="text" placeholder="headers:"  v-model="get_list3"/>
        <input type="text" placeholder="body:"  v-model="get_list4"/>
        <input type="text" placeholder="tests:"  v-model="get_list5"/>
        <div class="button">
          <button @click="add_suspend_get">run</button>
          <button>cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_get_show_get: true,
      show_post_show_post: false,
      show_post: true,
      show_get: false,
      add_get_list: true,
      get_name1: ['ff', 'ss'],
      get_list1: '',
      post_list1: []
      // loading: true
    }
  },
  created() {},
  methods: {
    // goToGetDemo() {
    //   this.$router.push('get');
    // },
    // goToPostDemo() {
    //   this.$router.push('post');
    // },
    appear_post() {
      console.log('213123')
      this.show_post_show_post = true;
      this.show_get_show_get = false;
      this.show_post = false;
      if (this.show_post === false) {
        console.log('this.show_post==false')
        this.show_get = true;
      }
      if (this.show_get === true) {
        console.log('this.show_get==false')
      }
    },
    appear_get() {
      this.show_post_show_post = false;
      this.show_get_show_get = true;
      // this.show_get = !this.show_get;
      // this.show_post = false;
    },
    add_suspend_get: function() {
      console.log(this.get_list1)
      this.get_name1.push(this.get_list1);
      this.get_list1 = '';
      // this.add_get_list = !this.add_get_list;
      // this.list1.push(this.input_suspend_get3);
      // if(this.show_test_page == false) {
      //   this.show_test_page=! this.show_test_page;
      // }
      // this.show_get =! this.show_get;
      // this.input_suspend_get3= "";
    },
    appear_get_name1(index) {
      this.get_name1.splice(index, 1)
    },
    add_suspend_post3() {
    //   this.name2.push(this.input_suspend_post3);
    //   this.list2.push(this.input_suspend_post3);
    //   if(this.show_test_page == false) {
    //     this.show_test_page =! this.show_test_page;
    //   }
    //   this.show_post =! this.show_post;
    //   this.input_suspend_post3 =  "";
    }
  }
};
</script>
<style>
ul,
li {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 25px;
}
#home {
  width: 100vw;
  height: 100vh;
  background: url("../assets/view2.jpg") no-repeat;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  font-family: FZShuTi;
  font-size: 35px;
}
.incorrect2:before {
  content: '\2716';
  color: #c9c1c1;
  float: right;
  margin: 0 13px 0 190px;
}
.cash {
  position:fixed;
  top:180px;
  width:100%;
}
.header {
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-item {
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #ffb6c1;
  cursor: pointer;
}

.nav-item:active,

button:active{
  background-color: lightblue;
  color: #ffffff;
}
.button-get{
  margin: 0 0 0 0;
}
.button-post{
  margin: 0 45px 0 15px;
}
.title:active ~ .lt-menu {
  display: block;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.form {
  width: 400px;
  height: 600px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: -10px 0px 0px -500px;
  padding: 0px 0 0 50px;
}
.form1 {
  width: 800px;
  height: 545px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: -10px 0px 0px 235px;
  padding: 55px 0 0 180px;
}
.form3{
  width: 200px;
  height: 30px;
  border-color: #cecec9;
  margin: 35px 0 0 0;
  font-size: 41px;
}
input {
  height: 50px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #ffb6c1;
  margin-bottom: 30px;
  width: 400px;
  font-family: FZShuTi;
  font-size: 30px;
}

button{
  height: 50px;
  border: 1px solid #fff;
  margin-bottom: 30px;
  width: 150px;
  cursor: pointer;
  background-color: #ffffff;
  font-family: FZShuTi;
  font-size: 30px;
}

.form div{
  display: flex;
  align-items: center;
  justify-content: space-between;/*弹性布局*/
}
#app {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  position: absolute;
  display: flex;
  position: absolute;
  justify-content: center;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
